<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Language" content="en"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Sleeps</title>
  <link rel="stylesheet" href="/js/jquery.ui/themes/flora/flora.all.css" type="text/css"
        media="screen" title="Flora (Default)"/>
  <link rel="stylesheet" href="/stylesheets/style.css" type="text/css"/>
  <link rel="stylesheet" href="/stylesheets/autocomplete.css" type="text/css"/>
  <style type="text/css">
    pre {
      border: 1px solid #50A029;
      padding: 5px;
      padding-top: 15px;
    }

    .codeLink {
      text-decoration: underline;
    }
  </style>

  <script type="text/javascript" src="/js/jquery.ui/jquery-1.2.4a.js"></script>

  <script type="text/javascript" src="/js/jquery.ui/ui.base.js"></script>
  <script type="text/javascript" src="/js/jquery.ui/datepicker/core/ui.datepicker.js"></script>
  <script type="text/javascript" src="/js/jquery.ui/datepicker/i18n/ui.datepicker-fr.js"></script>
  <script type="text/javascript" src="/js/autocomplete.js"></script>
</head>
<body class="flora">
<h2>Sleep For {{ user }}</h2>
<table>
  <form action="/addNap" method="post">
    <tr>
      <td>Child</td>
      <td>Start Date (MM/DD/YY)</td>
      <td>Start Time (HH24:MM)</td>
      <td>End Time (HH24:MM)</td>
    </tr>
    <tr>
      <td><input type="text" name="child" id="child"/></td>
      <td><input type="text" name="startDate" id="startDate" size="10"/></td>
      <td><input type="text" name="startTime" id="startTime" size="10"/></td>
      <td><input type="text" name="endTime" id="endTime" size="10"/></td>
    </tr>
    <tr>
      <td>Type</td>
      <td>Notes</td>
    </tr>
    <tr>
      <td>
        <select name="type">
          <option value="NAP">Nap</option>
          <option value="SLUMBER">Slumber</option>
        </select>
      </td>
      <td colspan="4"><input type="text" name="notes" id="notes" size="50"/></td>
      <td><input type="submit" value="Add Nap"></td>
    </tr>
  </form>
</table>
<br>
<br>
<br>
<form action="/deleteNap" method="post">
<table>
  <tr>
    <td/>
    <td>Child</td>
    <td>Date</td>
    <td>Start</td>
    <td>End</td>
    <td>Duration (mins)</td>
    <td>Type</td>
    <td>Notes</td>
    <td>Day Total (hours)</td>
  </tr>
  {% if not naps %}
  <tr>
    <td colspan="9">No Naps!</td>
  </tr>
  {% endif %}
  {% for nap in naps %}
  <tr>
    {% if nap.isSum %}
      <td/>
    {% else %}
      <td><input type="checkbox" name="delete_{{ nap.key }}"/></td>
    {% endif %}
    <td>{{ nap.childName }}</td>
    <td>{{ nap.start|date:"M d Y" }}</td>
    {% if nap.isSum %}
      <td colspan="5"/>
      <td><b>{{ nap.dayDuration }}</b></td>
    {% else %}
      <td>{{ nap.start|date:"g:iA" }}</td>
      <td>{{ nap.end|date:"g:iA"  }}</td>
      <td>{{ nap.duration  }}</td>
      <td>{{ nap.type  }}</td>
      <td>{{ nap.notes }}</td>
      <td/>
    {% endif %}
  </tr>
  {% endfor %}
  <tr>
    <td><input type="submit" value="Delete Naps"></td>
  </tr>
</table>
</form>

<script type="text/jsdemo" charset="utf-8" class="demojs">
  $('#startDate').datepicker({dateFormat: 'mm/dd/y'});
  $('#endDate').datepicker({dateFormat: 'mm/dd/y'});
</script>

<a href="{{ url }}">{{ url_linktext }}</a>

<script type="text/javascript">
if (!window.console) {
	window.console = {
		log: function() {
			alert(arguments[0]);
		}
	}
}

$(window).bind("load",function(){
	$.datepicker.setDefaults($.datepicker.regional['']);
	$(".demojs").each(function () {
		eval($(this).html());
	});
});

function findValue(li) {
	if( li == null ) return alert("No match!");

	// if coming from an AJAX call, let's use the CityId as the value
	if( !!li.extra ) var sValue = li.extra[0];

	// otherwise, let's just display the value in the text box
	else var sValue = li.selectValue;
}

function selectItem(li) {
	findValue(li);
}

function formatItem(row) {
	return row[0];
}

$(document).ready(function() {
	$("#child").autocomplete(
		"/childLookup",
		{
			delay:10,
			minChars:1,
			matchSubset:1,
			matchContains:1,
			cacheLength:10,
			onItemSelect:selectItem,
			onFindValue:findValue,
			formatItem:formatItem,
			autoFill:true
		}
	);

//	$("#child").autocompleteArray(
//		[
//			"Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron",
//			"Woodstock", "Woodville", "Wooster", "Wren", "Xenia", "Yellow Springs",
//			"Yorkshire", "Yorkville", "Youngstown", "Zaleski", "Zanesfield", "Zanesville",
//			"Zoar"
//		],
//		{
//			delay:10,
//			minChars:1,
//			matchSubset:1,
//			onItemSelect:selectItem,
//			onFindValue:findValue,
//			autoFill:true,
//			maxItemsToShow:10
//		}
//	);
});</script>

</body>
</html>